<template>
	<view class="forms">
		<u--form labelPosition="left" :model="form" ref="formList" labelWidth="120" class="formINFOs" v-if="show != 1">
			<u-form-item label="危害辨识" borderBottom @click="show=1">
				<u--input v-model="form.whbs" placeholder="请选择危害辨识" disabled disabledColor="#ffffff" border="none">
				</u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<view class="textears">
				<u-checkbox-group v-model="form.harm" placement="column" :labelSize='32'>
					<u-checkbox activeColor="#53c21d" v-for="(item,index) in form.harm" :label="item.label"
						:name="item.value" shape="circle" :key="index" style="padding: 10px 20px" :checked=true>
					</u-checkbox>
				</u-checkbox-group>
			</view>
		</u--form>
		<hazardousFactors v-if="show === 1" @option="options" :pageCheck="pageCheck" ref="whbs"></hazardousFactors>
    <view class="btn">
      <u-button type="primary" text="上一步" style="margin: 0 10px" @click="superior"></u-button>
      <u-button type="primary" text="确 定" style="margin: 0 10px" @click="nextStep"></u-button>
    </view>
	</view>
</template>

<script>
	import hazardousFactors from '../hazardousFactors/hazardousFactors.vue'
	import protection from '../protection/protection.vue'
	import Safe from '../safetyMeasures/safetyMeasures.vue'
	export default {
		components: {
			hazardousFactors,
      protection,
      Safe
		},
		props: ['pageCheck'],
		data() {
			return {
				show: false,
				formModel: {
					name: "",
					userPicker: "",
					datetime: "",
					picker: "",
				},
				list: null,
				form: {
					whbs: '',
					harm: []
				}
			}
		},
		methods: {
			options(val) {
			this.show = null
				this.form.harm = val
			},
			superior(){
				uni.navigateTo({
					url:`/pages/operationTicket/HotWork/HotWork`
				})
			},
      nextStep(){
			  if (this.pageCheck === 1 ){
          this.$refs.whbs && this.$refs.whbs.toHotWork()
        }
        console.log(88888,this.pageCheck);
        this.show = 0
        this.$emit("whbsSubmit", {step: this.$refs.whbs ? 1 : 2, value: this.form.harm})
      },
		}
	}
</script>

<style lang="scss" scoped>
	.forms {
		.formINFOs {
			background: #FFF;
			display: flex;
			height: 85vh;
			padding: 0 !important;
			flex-direction: column;

			.textears {
				flex: 1;
				background: #f6f6f6;
				margin-bottom: 30px;
				border-radius: 8px;
				//height:70vh;
				overflow-y: auto
			}
		}

		.btn {
			padding: 15px 0;
			display: flex;
			justify-content: space-between;
		}
	}
</style>
